<template>
	<div>
    <!-- 关注的店主 -->
    <div class="focusShop">
      -您可能感兴趣的店主-
    </div>

    <!-- 明星店铺 -->
    <van-cell
      title="明星店铺"
      :center="true"
      value="查看全部"
      is-link=""
    >
      <span slot='icon' class="leftBar"></span>
    </van-cell>
    <figure class="starStore" v-for="item in starShop">
        <van-image
          round
          width="50px"
          height="50px"
          :src="item.starImg"
        />
        <figcaption class="ym">
          <p>{{item.starShopName}}<van-icon name="star-o" /></p>
          <h3>花粉认证:{{item.starName}}</h3>
        </figcaption>
        <van-button @click="gz()" class="gz" color="#E6737F" :center='true' plain slot='right-icon' size="small" type="default">+关注</van-button>
      </figure>

    <!-- 推荐店主 -->
    <van-cell
      title="推荐店主"
      :center="true"
      value="查看全部"
      is-link=""
    >
      <span slot='icon' class="leftBar"></span>
    </van-cell>

    <figure class="starStore" v-for="item in goodShop">
        <van-image
          round
          width="50px"
          height="50px"
          :src="item.shopImg"
        />
        <figcaption>
          <p>{{item.onwerName}}<van-icon name="star-o" /></p>

          <h3>好评率：{{item.data}}</h3>
        </figcaption>
        <van-button @click="gz()" class="gz" color="#E6737F" :center='true' plain slot='right-icon' size="small" type="default">+关注</van-button>
      </figure>
	</div>
</template>

<script>
  import * as info from '@/yoona/getProList.js';
  export default {
    name:'Focus',
    data(){
      return {
        active:0,
        goodShop:[],
        starShop:[]
      }
    },
    mounted(){
      this.$emit('getHomeMsg',{active:this.active});
      info.getStarShop({}).then(res=>{
        if(res.data.code == 1){
          this.starShop = res.data.data;
        }
      });
      info.getGoodShop({}).then(res=>{
        if(res.data.code == 1){
          this.goodShop = res.data.data;
        }
      });
    },
    methods: {
      gz(){
        this.$toast('关注成功')
      }
    }
  }
</script>

<style scoped>
  .leftBar{
    width: 6px;
    height: 24px;
    background: pink;
    border-radius: 10px;
  }
  .van-cell__title{
    text-align: left;
    padding-left: 12px;
  }
  .starStore{
    display: flex;
    margin-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .starStore p{
    text-align: left;
    margin-left: -1px;
  }
  .gz{
    position: absolute;
    margin-left:230px;
    margin-top: 8px;
  }
  .ym p{
    text-align: left;
    margin-left: 1px;
  }
  figcaption{
    margin-left: 10px;
  }
  figcaption p{
    margin-left: -35px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  figcaption h3{
    font-size: 12px;
  }
  .mx{
    display: flex;
  }
  .focusShop{
    font-size: 14px;
    margin: 4px;
  }
</style>
